<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OPPO</title>
    <!-- favicon -->
    <link rel="shortcut icon"
        href="http://code.oppo.com/etc.clientlibs/global-site/clientlibs/clientlib-design/resources/icons/favicon.ico"
        type="image/x-icon">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- 导航部分 -->
    <div class="nav">
        <div class="content">
            <!-- 左侧nav -->
            <div class="left-nav fl">
                <ul>
                    <li>
                        <a href=""></a>
                    </li>
                    <li>
                        <a href=""></a>
                    </li>
                    <li>4001-666-888</li>
                </ul>
            </div>
            <!-- 右侧nav -->
            <div class="right-nav fr">
                <ul>
                    <li>注册</li>
                    <li>积分兑换</li>
                    <li>帮助中心</li>
                    <li>登录</li>
                    <li>
                        <img src="./images/icons/cart_02.png" alt="" class="fl">
                        购物车
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- middle-nav部分 -->
    <div class="middle-nav content">
        <!-- logo部分 -->
        <div class="logo fl">
            <a href=""></a>
        </div>
        <!-- header-nav部分 -->
        <div class="header-nav fr">
            <ul>
                <li>
                    <a href="">首页</a>
                </li>
                <li>
                    <a href="">手机配件</a>
                </li>
                <li>
                    <a href="">服务</a>
                </li>
                <li>
                    <a href="">专卖店</a>
                </li>
                <li>
                    <a href="">应用商店</a>
                </li>
                <li>
                    <a href="">ColorOS</a>
                </li>
                <li>
                    <a href="">社区</a>
                </li>
            </ul>
        </div>

    </div>
    <!-- banner部分 -->
    <div class="banner">
        <img src="./images/banner.jpg">
    </div>
    <!-- shop部分 -->
    <div class="shop">
        <!-- pro-top部分 -->
        <div class="pro-top content">
            <div class="common-title">
                <div class="line"></div>
                <div class="starphone">
                    OPPO
                    <span>STAR</span>
                    明星机型
                </div>
                <div class="line"></div>
            </div>
            <p>OPPO COLLECTION 全部手机</p>
        </div>
        <!-- 手机list部分 -->
        <div class="phone-list content ov">
            <ul>
                <li>
                    <a href="">
                        <img src="./images/mobile01.jpg" alt="">
                        <p>OPPO Find7</p>
                        <p>4G全年旗舰</p>
                        <p>￥3498立即购买</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./images/mobile02.jpg" alt="">
                        <p>OPPO Find7</p>
                        <p>4G全年旗舰</p>
                        <p>￥3498立即购买</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./images/mobile03.jpg" alt="">
                        <p>OPPO Find7</p>
                        <p>4G全年旗舰</p>
                        <p>￥3498立即购买</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./images/mobile04.jpg" alt="">
                        <p>OPPO Find7</p>
                        <p>4G全年旗舰</p>
                        <p>￥3498立即购买</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 精选配件部分 -->
    <div class="machine">
        <div class="content">
            <div class="pro-top common-title bottom61px">
                <div class="line"></div>
                <div class="starphone">
                    OPPO
                    <span>ACCESSORY</span>
                    精选配件
                </div>
                <div class="line"></div>
            </div>
            <!-- machine-list部分 -->
            <div class="machine-list ov">
                <!-- 左边list -->
                <div class="left-list right14px fl">
                    <div class=" up-list">
                        <div class="tallbox fl">
                            <a href="">
                                <img src="./images/list01.png" alt="">
                            </a>
                        </div>
                        <div class="right-list fl">
                            <div class="minibox">
                                <a href="">
                                    <img src="./images/list02.png" alt="">
                                </a>
                            </div>
                            <div class="minibox">
                                <a href="">
                                    <img src="./images/list06.png" alt="">
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="bottom-box">
                        <a href="">
                            <img src="./images/list03.png" alt="">
                        </a>
                    </div>
                </div>
                <!-- 右边list -->
                <div class="left-list fl">
                    <div class=" bottom-box bottom20px">
                        <a href="">
                            <img src="./images/list08.png" alt="">
                        </a>
                    </div>
                    <div class="up-list">
                        <div class="tallbox fl">
                            <a href="">
                                <img src="./images/list04.png" alt="">
                            </a>
                        </div>
                        <div class="right-list fl">
                            <div class="minibox">
                                <a href="">
                                    <img src="./images/list05.png" alt="">
                                </a>
                            </div>
                            <div class="minibox">
                                <a href="">
                                    <img src="./images/list07.png" alt="">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 探索oppo部分 -->
    <div class="oppo">
        <div class="content">
            <div class="pro-top common-title bottom">
                <div class="line"></div>
                <div class="starphone">
                    <span>WORLD</span>
                    OF
                    OPPO
                    探索欧珀
                </div>
                <div class="line"></div>
            </div>
            <!-- oppo-list部分 -->
            <div class="oppo-list ov">
                <div class="oppo-left fl">
                    <ul>
                        <li>
                            <a href="">
                                <img src="./images/con_left01.jpg" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="./images/con_left02.jpg" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="./images/con_left03.jpg" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="./images/con_left04.jpg" alt="">
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="oppo-right fl">
                    <a href="#">
                        <img src="./images/tab.jpg" alt="">
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- 正品保障部分 -->
    <div class="zhengpin">
        <div class="content">
            <div class="baozhang ov">
                <ul>
                    <li>
                        <p>正品保障</p>
                        <p>保障所有产品都是原装正品</p>
                    </li>
                    <li>
                        <p>正品保障</p>
                        <p>保障所有产品都是原装正品</p>
                    </li>
                    <li>
                        <p>正品保障</p>
                        <p>保障所有产品都是原装正品</p>
                    </li>
                    <li>
                        <p>正品保障</p>
                        <p>保障所有产品都是原装正品</p>
                    </li>
                    <li>
                        <p>正品保障</p>
                        <p>保障所有产品都是原装正品</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- about部分 -->
    <div class="about">
        <div class="content">
            <div class="me ov">
                <dl>
                    <dt>关于我们</dt>
                    <dd>
                        <a href="">关于我们</a>
                    </dd>
                    <dd>
                        <a href="">新闻中心</a>
                    </dd>
                    <dd>
                        <a href="">人才招聘</a>
                    </dd>
                </dl>
                <dl>
                    <dt>关于我们</dt>
                    <dd>
                        <a href="">关于我们</a>
                    </dd>
                    <dd>
                        <a href="">新闻中心</a>
                    </dd>
                    <dd>
                        <a href="">人才招聘</a>
                    </dd>
                </dl>
                <dl>
                    <dt>关于我们</dt>
                    <dd>
                        <a href="">关于我们</a>
                    </dd>
                    <dd>
                        <a href="">新闻中心</a>
                    </dd>
                    <dd>
                        <a href="">人才招聘</a>
                    </dd>
                </dl>
                <dl>
                    <dt>关于我们</dt>
                    <dd>
                        <a href="">关于我们</a>
                    </dd>
                    <dd>
                        <a href="">新闻中心</a>
                    </dd>
                    <dd>
                        <a href="">人才招聘</a>
                    </dd>
                </dl>
                <dl>
                    <dt>关于我们</dt>
                    <dd>
                        <a href="">关于我们</a>
                    </dd>
                    <dd>
                        <a href="">新闻中心</a>
                    </dd>
                    <dd>
                        <a href="">人才招聘</a>
                    </dd>
                </dl>
                <dl class="last">
                    <dt>关于我们</dt>
                    <dd>
                        <p>4001-666-888</p>
                        <p>7*24小时客服电话</p>
                    </dd>
                    <dd>
                        <p>在线QQ客服</p>
                        <p>服务时间段8:30-22:00</p>
                    </dd>
                </dl>
            </div>
        </div>
    </div>
    <!-- footer部分 -->
    <div class="footer ov">
        <div class="content">
            <div class="left fl">
                <span>
                    ©2014东莞市永盛通信科技有限公司 粤ICP 备08130115号
                </span>
            </div>
            <div class="right fr">
                <ul>
                    <li>
                        <a href="">版权说明</a>
                    </li>
                    <li>
                        <a href="">使用协议</a>
                    </li>
                    <li>
                        <a href="">网站地图</a>
                    </li>
                    <li>
                        <a href="">友情链接</a>
                    </li>
                    <li>
                        <a href="">联系我们</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>